<!-- 上传组件 -->
<template>
  <div>
    <div class="relative">
      <el-upload
        class="mine-upload"
        :multiple="false"
        :on-change="fileListChange"
        :on-remove="fileListChange"
        drag
        action=""
        :accept="fileType"
        :file-list="fileList"
        ref="upload"
        :auto-upload="false"
      >
        <!-- :clearFiles="clearFiles" -->
        <i class="icon-upload-line iconfont"></i>
        <div class="el-upload__text"><b>点击或拖拽文件到此区域以上传</b></div>
        <div class="el-upload__text file-limit">
          <span>支持拓展名：</span>
          <span>{{ fileType.replace(/\,/g, " ") }}</span>
        </div>
      </el-upload>
      <div
        class="loading"
        v-if="
          uploadStatus == 'uploading' ||
          (isUploadOnce == true && uploadStatus == 'success')
        "
      ></div>
    </div>
    <div
      class="upload-status"
      v-if="uploadStatus === 'uploading'"
      style="color: #0c92e0"
    >
      预测中...
    </div>
    <div
      class="upload-status"
      v-if="uploadStatus === 'success'"
      style="color: #0c92e0"
    >
      处理成功
    </div>
    <div
      class="upload-status"
      v-if="uploadStatus === 'error'"
      style="color: #f73d47"
    >
      处理失败
    </div>
  </div>
</template>

<script>
export default {
  props: {
    fileType: {
      // 上传文件类型
      type: String,
      default: "",
    },

    isUploadOnce: {
      // 是否只能上传一次
      type: Boolean,
      default: true,
    },

    fileList: {
      type: Array,
    },
  },

  data: function () {
    return {
      //   fileList: [], // 当前的文件队列
      uploadStatus: "waiting", // 上传状态
    };
  },

  methods: {
    // 修改上传状态
    // uploadStatus: waiting: 等待上传; uploading: 正在上传中; success: 上传成功; error: 上传失败;
    changeUploadStatus: function (value) {
      this.uploadStatus = value;
    },
    // 文件列表发生改变
    fileListChange: function (file, fileList) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);

      if (!this.fileType.includes(fileSuffix)) {
        this.$message.error(
          `上传文件只能是 ${this.fileType.split(",").join("")}格式`
        );
        this.$refs.upload.clearFiles();
        return false;
      }

      if (fileList.length) {
        fileList = [fileList[fileList.length - 1]];
      } else {
        fileList = [];
      }
      this.uploadStatus = "waiting";
      this.fileList = fileList;
      this.$emit("change", { file: file, fileList: fileList });
    },

    // 清空文件
    clear() {
      this.fileList = [];
      this.$emit("change", { file: null, fileList: [] });
    },
  },
};
</script>

<style lang="less" scoped>
.icon-upload-line {
  font-size: 24px;
  color: #0c92e0;
  margin-top: 6px;
  display: block;
  line-height: 1em;
}

.el-upload__text {
  margin-top: 16px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  line-height: 1em;

  &.file-limit {
    margin-top: 6px;
  }
}

.el-upload__text b {
  color: black;
  font-size: 14px;
}

.mine-upload /deep/ .el-upload-dragger {
  width: 512px;
  height: 98px;
}

.upload-status {
  margin-top: 10px;
}

.relative {
  position: relative;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
}
</style>
